<script setup lang="ts">
import { ref, toRefs, reactive, onMounted, watch } from 'vue';
import ScrollVue from '@/components/Scroll.vue'
const props = defineProps({
  list: {
    type: Array,
    default: [] as Array<Record<string, string>>
  },
})
const { list } = toRefs(props)
const ScrollDom = ref()
const state = reactive({
  nums: [
    { value: 0, unit: '个', desc: '直接服务国家部委' },
    { value: 0, unit: '个', desc: '覆盖省份' },
    { value: 0, unit: '+', desc: '合作项目' },
    { value: 0, unit: '个', desc: '覆盖城域' },
  ],
  list: [] as Array<Array<any>>,
  timer: 0,
  num1: 21,
  num2: 23,
  num3: 333,
  num4: 56,
  isStart: false,
})
watch(list, (val: any) => {
  state.list = getList(val, 14)
})
onMounted(() => {
  state.list = getList(list.value, 14)
  const dom = document.querySelector('#count-wrap')!
  const intersectionObserver = new IntersectionObserver((entires) => {
    entires.forEach((entry, index) => {
      // console.log(entry)
      if (entry.isIntersecting) {
        intersectionObserver.disconnect();
        scrollNum()
      }
    })
  }, { threshold: 0.4 });
  intersectionObserver.observe(dom);
})
const getList = (arr: Array<any>, num: number) => {
  let index = 0, arr2 = []
  while (index < arr.length) {
    arr2.push(arr.slice(index, index += num))
  }
  return arr2
}

const handleClick = (index: number) => {
  ScrollDom.value.clickFn(index)
}
const scrollNum = () => {
  let num1 = state.num1,
    num2 = state.num2,
    num3 = state.num3,
    num4 = state.num4;
  state.timer = window.setInterval(() => {
    let step1 = Math.ceil(num1 / 15);
    let step2 = Math.ceil(num2 / 15);
    let step3 = Math.ceil(num3 / 15);
    let step4 = Math.ceil(num4 / 15);
    if (state.nums[0].value >= num1) {
      state.nums[0].value = num1;
    } else {
      state.nums[0].value += step1;
    }
    if (state.nums[1].value >= num2) {
      state.nums[1].value = num2;
    } else {
      state.nums[1].value += step2;
    }
    if (state.nums[2].value >= num3) {
      state.nums[2].value = num3;
    } else {
      state.nums[2].value += step3;
    }
    if (state.nums[3].value >= num4) {
      state.nums[3].value = num4;
    } else {
      state.nums[3].value += step4;
    }
    if (
      state.nums[0].value >= num1 &&
      state.nums[1].value >= num2 &&
      state.nums[2].value >= num3 &&
      state.nums[3].value >= num4
    ) {
      window.clearInterval(state.timer);
    }
  }, 35);
}
</script>

<template>
  <div class="organization-wrapper" id="count-wrap">
    <div class="container">
      <div class="count-wrap">
        <div class="count-item" v-for="(item, index) in state.nums" :key="index">
          <div class="num">
            <span class="value">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
      <div class="bot">
        <div class="scroll-box">
          <div class="arrow left" @click="handleClick(-1)">
            <div class="infont-icon"></div>
          </div>
          <div class="arrow right" @click="handleClick(1)">
            <div class="infont-icon"></div>
          </div>
          <ScrollVue :list="state.list" :pagination="false" :margin="0" ref="ScrollDom">
            <template v-for="(item, index) in state.list" #[index]>
              <div class="list-wrapper">
                <div class="list-item" v-for="(child, cindex) in item" :key="cindex">
                  <img :src="child.logo">
                </div>
              </div>
            </template>
          </ScrollVue>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.organization-wrapper {
  min-width: 1440px;
  height: 500px;
  margin-bottom: 100px;
  background: url('https://img.cctvch.cn/uploads/202205/2812/6291abcc14967201984.png') no-repeat center 0;
  background-size: cover;

  .count-wrap {
    overflow: hidden;
    height: 280px;
    padding-top: 100px;
    padding-bottom: 100px;

    .count-item {
      float: left;
      width: 25%;
      text-align: center;
      color: #fff;

      .value {
        font-size: 60px;
        font-family: Arial;
        text-align: center;
        margin-top: 15px;
        line-height: 52px;
        vertical-align: top;
      }

      .unit {
        position: relative;
        top: 1px;
        left: 6px;
        font-size: 14px;
        vertical-align: top;
      }

      .desc {
        font-size: 13px;
        line-height: 26px;
      }
    }
  }

  .bot {
    height: 322px;
  }

  .scroll-box {
    position: relative;
    width: 1380px;
    height: 322px;
    margin: 0 auto;
    padding: 50px 145px;
    background-color: #fff;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #252086, #E60012);
    box-shadow: 0px 12px 12px 1px rgba(98, 102, 117, 0.15);
    border-radius: 12px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;

    .list-wrapper {
      width: 1088px;
      height: 220px;
      padding: 0 5px;
    }

    .list-item {
      float: left;
      // width: 148px;
      // height: 95px;
      // margin-left: 3px;
      // margin-right: 3px;
      width: 125px;
      height: 105px;
      margin-left: 14px;
      margin-right: 14px;
      margin-bottom: 5px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .arrow {
      position: absolute;
      top: 50%;
      width: 60px;
      height: 60px;
      font-size: 0;
      background: #FFFFFF;
      border: 1px solid #9195A3;
      border-radius: 12px;
      cursor: pointer;

      .infont-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 0px;
        transform: translate(-50%, -50%);

        &::before {
          content: "";
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          height: 0;
          width: 0;
          transition: all 0.2s cubic-bezier(.785, .135, .15, .86);
        }

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          width: 0px;
          height: 2px;
          background: #9195A3;
          display: inline-block;
          transform: translateY(-50%);
          transition: all 0.2s cubic-bezier(.785, .135, .15, .86);
        }
      }

      &.left {
        left: 0;
        transform: translate(-50%, -50%);

        .infont-icon {
          &::before {
            margin-left: -4px;
            border-right: 6px solid #9195A3;
          }

          &::after {
            right: -10px;
          }
        }
      }

      &.right {
        right: 0;
        transform: translate(50%, -50%);

        .infont-icon {
          &::before {
            border-left: 6px solid #9195A3;
          }

          &::after {
            left: -5px;
          }
        }
      }

      &:hover {
        .infont-icon {
          &::after {
            width: 14px;
          }
        }
      }

      &.left:hover {
        .infont-icon {
          &::before {
            margin-left: -8px;
          }
        }
      }

      &.right:hover {
        .infont-icon {
          &::before {
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>
